<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <title></title>
    <meta name="description" content=""/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <script src="../static/js/vue.min.js"></script>
    <link rel="stylesheet" href="../static/cdn/element-ui/index.css"/>
    <link rel="stylesheet" href="../static/css/iconfont/iconfont.css">
    <link rel="stylesheet" href="../static/css/common.css">
    <link rel="stylesheet" href="../static/css/list.css">
    <script src="../static/cdn/element-ui/index.js"></script>
    <script src="../static/js/api.js?v=1.0"></script>
    <script src="../static/js/utils.js"></script>
    <script src="../static/cdn/axios/axios.min.js"></script>
    <script src="../static/js/common.js?version=1.0"></script>

    <!-- 校验保护码js -->
    <script src="../static/js/validateCode.js"></script>


</head>

<body>
<div id="app">
    <el-container>
        <el-header>
            <el-menu :default-active="activeName" mode="horizontal" background-color="#171b22" text-color="#fff" active-text-color="#00baff" @select="handleSelect">
                <el-menu-item index="0">
                    <i class="iconfont icon-daping"></i>
                    模板库
                </el-menu-item>
                <el-menu-item index="1">
                    <i class="iconfont icon-moban"></i>
                    组件库
                </el-menu-item>
            </el-menu>
        </el-header>
        <el-main>
            <div class="content">
                <div class="content__item content__item--add">
                    <a href="./build2.html?type=0&token=3333" target="_blank">
                        <i class="el-icon-plus"></i>
                        <p>新建大屏</p>
                    </a>
                </div>
                <div class="content__item" v-for="(item,index) in list" :key="index" @mouseover="item._menu=true" @mouseout="item._menu=false">
                    <div class="content__info">
                        <img v-if="item.thumbnail" :src="getThumbnail(item.thumbnail)" alt=""/>
                        <img v-else-if="item.imageUrl" :src="getImagePath(item.imageUrl)" alt=""/>
                        <div class="content__menu" v-if="item._menu">
                            <a class="content__btn" :href="item.href?`${item.href}`:`./build?id=${item.id}&token=3333`" target="_blank">编辑</a>
                            &nbsp;<a href="#" class="content__btn" @click="deleteReport(item)">删除</a>
                        </div>
                    </div>
                    <div class="content__main">
                        <span class="content__name">{{item.screenName}}</span>
                        <div>
                            <a class="content__view" href="#"  @click="copyReport(item)">
                                <i class="el-icon-document-copy"></i>复制
                            </a>
                            <a class="content__view" :href="item.href?`${item.href}`:`./view.html?id=${item.id}`" target="_blank">
                                <i class="el-icon-view"></i>
                                预览
                            </a>
                            <span class="content__status" :class="{'content__status--active':item.status}">
                  <i class="el-icon-check"></i>
                  {{item.status=='0'?'未发布':'已发布'}}
                </span>
                        </div>

                    </div>
                </div>
            </div>
        </el-main>
    </el-container>
</div>
</body>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                basePath,
                token: null,
                url: {
                    "list": basePath + "/list",
                    "delete": basePath + "/delete",
                    "copyReport": basePath + "/copyReport"
                },
                activeName: '0',
                list: []
            }
        },
        mounted() {
            this.token = getQueryString('token');
            if (!this.token) {
                //window.location.href = "./403/index2.html";
            }
            this.getData();
        },
        watch: {
            activeName: {
                handler(val) {
                    this.getData();
                }
            }
        },
        methods: {
            getThumbnail(path) {
                if (path) {
                    if (!path.startsWith("http")) {
                        path = base + path;
                    }
                }
                return path;
            },
            getImagePath(backgroundImage) {

                if (backgroundImage) {
                    if (!backgroundImage.startsWith("http")) {
                        backgroundImage = basePath + backgroundImage;
                    }
                }
                return backgroundImage;
            }, copyReport(item) {
                let nowTime = new Date().getTime();
                item.createTime = nowTime;
                item.updateTime = nowTime;
                item.delFlag = 0;

                const loading = this.$loading({
                    lock: true,
                    text: '正在复制中，请稍后',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                });
                axios.post(this.url.copyReport, item, {
                    headers: {
                        "X-Access-Token": this.token
                    }
                }).then(res => {
                    loading.close();
                    this.$message({
                        offset: 200,
                        duration: 700,
                        showClose: true,
                        message: '复制成功',
                        type: 'success'
                    });
                    this.getData();

                }).catch(err => {
                    this.$message({
                        offset: 200,
                        duration: 2000,
                        showClose: true,
                        message: '复制失败',
                        type: 'error'
                    });
                })


            },
            deleteReport(item) {
                let deleteFn = () => {
                    this.$confirm('确定删除' + item.screenName + '吗?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        axios.delete(this.url.delete, {
                            params: {
                                id: item.id
                            },
                            headers: {
                                "X-Access-Token": this.token
                            }
                        }).then(res => {
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                            this.getData();
                        });

                    }).catch(() => {
                        console.log("cancel===");
                    });
                };
                if (!item.protectionCode) {
                    deleteFn();
                    return;
                }
                validateProtectionCode(item.protectionCode, deleteFn)

            },
            getData() {
                /* axios.get(this.url.list, {
                     params: {
                         type: this.activeName
                     },
                     headers: {
                         "X-Access-Token": this.token
                     }
                 }).then(res => {
                     this.list = res.data.result;
                     this.initData();
                 })*/
                this.list =[{"id":"1261199685599690754","screenName":"智慧社区内网比对平台_副本","screenDescribe":null,"imageUrl":"https://jeecgos.oss-cn-beijing.aliyuncs.com/upload/test/a04215d288ef4dbebfca2bbbe4128b20.png","status":"0","desScreenMainJson":null,"desScreenItemJson":null,"type":null,"thumbnail":"https://jeecgos.oss-cn-beijing.aliyuncs.com/upload/test/4c615e4b59544729b82941e43407ff72.png","createBy":null,"createTime":null,"updateBy":null,"updateTime":null,"delFlag":null,"protectionCode":null},{"id":"1258347257696165890","screenName":"jeecg使用统计表","screenDescribe":null,"imageUrl":"/img/bg/bg1.png","status":"0","desScreenMainJson":null,"desScreenItemJson":null,"type":null,"thumbnail":"https://static.jeecg.com/bigscreen/images/国炬软件logo_1588848428656.png","createBy":null,"createTime":null,"updateBy":null,"updateTime":null,"delFlag":null,"protectionCode":null},{"id":"1209393782043222017","screenName":"大屏模版1","screenDescribe":null,"imageUrl":"/img/bg/bg1.png","status":"0","desScreenMainJson":null,"desScreenItemJson":null,"type":null,"thumbnail":"https://jeecgos.oss-cn-beijing.aliyuncs.com/bigscreen/images/22f3f30c6e9c4784a35f3ea67842fd26.png","createBy":null,"createTime":null,"updateBy":null,"updateTime":null,"delFlag":null,"protectionCode":""},{"id":"1209393782622035969","screenName":"大屏模版2","screenDescribe":null,"imageUrl":"/img/bg/bg18.jpg","status":"0","desScreenMainJson":null,"desScreenItemJson":null,"type":null,"thumbnail":"https://jeecgos.oss-cn-beijing.aliyuncs.com/bigscreen/images/fe818a0fae734d63bf48702952c4c6b2.png","createBy":null,"createTime":null,"updateBy":null,"updateTime":null,"delFlag":null,"protectionCode":"1212"},{"id":"1209393782714310657","screenName":"大屏模版3","screenDescribe":null,"imageUrl":"/img/bg/bg18.jpg","status":"0","desScreenMainJson":null,"desScreenItemJson":null,"type":null,"thumbnail":"https://jeecgos.oss-cn-beijing.aliyuncs.com/bigscreen/images/f08c738fdd034607b897184d67c81383.png","createBy":null,"createTime":null,"updateBy":null,"updateTime":null,"delFlag":null,"protectionCode":""},{"id":"1209393783116963841","screenName":"大屏名称4","screenDescribe":null,"imageUrl":"/img/bg/bg1.png","status":"0","desScreenMainJson":null,"desScreenItemJson":null,"type":null,"thumbnail":"/jmreport/bigscreen/img/thumbnail/data9_1577178018658.jpg","createBy":null,"createTime":null,"updateBy":null,"updateTime":null,"delFlag":null,"protectionCode":""},{"id":"1211961482594553857","screenName":"大数据可视化展示平台","screenDescribe":null,"imageUrl":"https://jeecgos.oss-cn-beijing.aliyuncs.com/upload/test/f29fc26495114f73b0e8ea2cb5f4e167.jpg","status":"0","desScreenMainJson":null,"desScreenItemJson":null,"type":null,"thumbnail":"https://jeecgos.oss-cn-beijing.aliyuncs.com/upload/test/0613c4abc49445d985e7a017bcd0e3da.png","createBy":null,"createTime":null,"updateBy":null,"updateTime":null,"delFlag":null,"protectionCode":""},{"id":"1212564716942061569","screenName":"交易大数据可视化平台","screenDescribe":null,"imageUrl":"https://jeecgos.oss-cn-beijing.aliyuncs.com/upload/test/f29fc26495114f73b0e8ea2cb5f4e167.jpg","status":"0","desScreenMainJson":null,"desScreenItemJson":null,"type":null,"thumbnail":"https://jeecgos.oss-cn-beijing.aliyuncs.com/upload/test/5b56ab8aa8d34238ba43419fb73d8483.png","createBy":null,"createTime":null,"updateBy":null,"updateTime":null,"delFlag":null,"protectionCode":""},{"id":"1214031359010160642","screenName":"智慧社区内网比对平台","screenDescribe":null,"imageUrl":"https://jeecgos.oss-cn-beijing.aliyuncs.com/upload/test/a04215d288ef4dbebfca2bbbe4128b20.png","status":"0","desScreenMainJson":null,"desScreenItemJson":null,"type":null,"thumbnail":"https://jeecgos.oss-cn-beijing.aliyuncs.com/upload/test/4c615e4b59544729b82941e43407ff72.png","createBy":null,"createTime":null,"updateBy":null,"updateTime":null,"delFlag":null,"protectionCode":""}]
                this.initData();
            },
            handleSelect(key, keyPath) {
                this.activeName = key;
            },
            initData() {
                this.list.forEach((ele, index) => {
                    this.$set(this.list[index], '_menu', false)
                })
            }
        }
    })
</script>

</html>